import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Button, Welcome } from '@storybook/react/demo';
import { IoIosFolder, IoIosFolderOpen } from 'react-icons/io';

import Editable from '../components/Common/Editable';
import TreeNode from '../components/Common/TreeNode';
import Draggable from '../components/Common/Draggable';
let openedIds = ['1a'];
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

storiesOf('Button', module)
    .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
    .add('with some emoji', () => (
        <Button onClick={action('clicked')}>
            <span role="img" aria-label="so cool">
                😀 😎 👍 💯
            </span>
        </Button>
    ));
storiesOf('Editable', module).add('Default', () => (
    <Editable
        isReadOnly={false}
        value={'test'}
        onEditablItemChange={action('value')}
        editableInputRef={this}
    />
));
storiesOf('TreeNode', module)
    .add('Default', () => (
        <TreeNode
            datas={[
                { id: '1a', title: 'test1', level: 0, pid: '', type: 'folder' },
                { id: '4a', title: 'test4', level: 1, pid: '1a', type: 'para' },
                { id: '2a', title: 'test2', level: 0, pid: '', type: 'folder' },
                { id: '3a', title: 'test3', level: 0, pid: '', type: 'folder' }
            ]}
            openedIds={['1a']}
            NodeRender={(item, isLeaf, isOpen, nodeType) => {
                return (
                    <div style={{ display: 'flex' }}>
                        <div className="tree-icon" style={{ width: '2rem' }}>
                            {isLeaf === true ? (
                                item.level === 0 ? (
                                    <IoIosFolderOpen />
                                ) : (
                                    <IoIosFolder />
                                )
                            ) : isOpen === true ? (
                                <IoIosFolderOpen />
                            ) : (
                                <IoIosFolder />
                            )}
                        </div>
                        {item.title}
                    </div>
                );
            }}
        />
    ))
    .add('can editable', () => (
        <TreeNode
            datas={[
                { id: '1a', title: 'test1', level: 0, pid: '', type: 'folder' },
                { id: '4a', title: 'test4', level: 1, pid: '1a', type: 'para' },
                { id: '2a', title: 'test2', level: 0, pid: '', type: 'folder' },
                { id: '3a', title: 'test3', level: 0, pid: '', type: 'folder' }
            ]}
            openedIds={openedIds}
            NodeRender={(item, isLeaf, isOpen, nodeType) => {
                return (
                    <div style={{ display: 'flex' }}>
                        <div
                            className="tree-icon"
                            style={{ width: '2rem' }}
                            onClick={e => {
                                openedIds.indexOf(e.target.id);
                                action('icon');
                            }}
                        >
                            {isLeaf === true ? (
                                item.level === 0 ? (
                                    <IoIosFolderOpen />
                                ) : (
                                    <IoIosFolder />
                                )
                            ) : isOpen === true ? (
                                <IoIosFolderOpen />
                            ) : (
                                <IoIosFolder />
                            )}
                        </div>
                        <Editable
                            id={`editableItem-${item.type}-${item.id}`}
                            EditableIds={['editableItem-1a']}
                            value={item.title}
                            onEditablItemChange={action('value')}
                            editableInputRef={element => (this.ee = element)}
                        />
                    </div>
                );
            }}
        />
    ))
    .add('can draggable', () => (
        <TreeNode
            datas={[
                { id: '1a', title: 'test1', level: 0, pid: '', type: 'folder' },
                { id: '4a', title: 'test4', level: 1, pid: '1a', type: 'para' },
                { id: '2a', title: 'test2', level: 0, pid: '', type: 'folder' },
                { id: '3a', title: 'test3', level: 0, pid: '', type: 'folder' }
            ]}
            openedIds={openedIds}
            NodeRender={(item, isLeaf, isOpen, nodeType) => {
                return (
                    <div style={{ display: 'flex' }}>
                        <div
                            className="tree-icon"
                            style={{ width: '2rem' }}
                            onClick={e => {
                                openedIds.indexOf(e.target.id);
                                action('icon');
                            }}
                        >
                            {isLeaf === true ? (
                                item.level === 0 ? (
                                    <IoIosFolderOpen />
                                ) : (
                                    <IoIosFolder />
                                )
                            ) : isOpen === true ? (
                                <IoIosFolderOpen />
                            ) : (
                                <IoIosFolder />
                            )}
                        </div>
                        <Draggable id={item.id} />
                    </div>
                );
            }}
        />
    ));
